﻿@{
  ViewData["Title"] = "角色管理";
}
<div class="layui-layout layui-layout-admin">
  <form class="layui-form" action="" lay-filter="val-filter">
    <div class="layui-form-item">
      <label class="layui-form-label">名称</label>
      <div class="layui-input-block">
        <input type="hidden" name="id" value="0">
        <input type="text" name="name" autocomplete="off" lay-verify="required" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">编码</label>
      <div class="layui-input-block">
        <input type="text" name="code" autocomplete="off" lay-verify="required" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
          <input type="number" value="100" lay-affix="number" name="orderNo" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">状态</label>
        <div class="layui-input-block">
          <input type="radio" name="status" value="1" title="启用" checked>
          <input type="radio" name="status" value="0" title="禁用">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-block">
        <textarea name="remark" class="layui-textarea"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">权限</label>
      <div class="layui-input-block">
        <div id="tree"></div>
      </div>
    </div>

  </form>
</div>

@section scripts {
  <script type="text/javascript">
    var app = {};
    layui.use(['http', 'toast'], function () {
      var form = layui.form,
        toast = layui.toast, $ = layui.$,
        tree = layui.tree,
        http = layui.http;
      //
      app.initData = function (data) {
        form.val('val-filter', data);
        //
        http.get('/api/sysMenuEx/menuLayUITree').then((res) => {
          tree.render({
            elem: '#tree',
            data: res.result,
            showCheckbox: true,  // 是否显示复选框
            onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
            id: 'tree-id-1'
          });
        }).then((res) => {
          if (data.id) {
            //初始化选中树节点
            var url = '/api/sysRole/ownMenuList?Status=2&Id=' + data.id;
            http.get(url).then((res) => {
              tree.setChecked('tree-id-1', res.result)
            });
          }
        })
      };
      app.save = function () {
        form.submit('val-filter', function (data) {
          var postData = data.field;

          postData.menuIdList = getCheckedId(tree.getChecked('tree-id-1'));
          //角色列表
          var url = postData.id == '0' ? '/api/sysRole/add' : '/api/sysRole/update'
          http.post(url, postData).then((res) => {
            if (res.code == 200) {
              parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
              parent.layui.table.reload('lsttable');
              toast.success({ message: '保存成功！' });
            }
            else {
              layer.alert('保存失败，错误信息:' + res.message, { icon: 2 });
            }
          });

          return false;
        });
      }
      //获取树选中的所有id
      function getCheckedId(data) {
        var arr = [];
        data.forEach(function (item) {
          arr.push(item.id);
          //item 有children属性
          if (item.children != null) {
            arr = arr.concat(getCheckedId(item.children));
          }
        });
        return arr;
      }
    })
  </script>
}
